<div class="pm_table addressKeysView-container" ng-class="displayMode">
    <form>
        <input
            type="file"
            class="import-private-key-file"
            multiple
            accept=".asc,.txt">
    </form>
    <p class="addressKeysView-main-actions">
        <reactivate-keys-btn></reactivate-keys-btn>
        <button data-action="newKey" type="button" class="pm_button primary" translate-context="Action" translate>Add new key</button>
        <button data-action="importKey" type="button" class="pm_button" translate-context="Action" translate>Import key</button>
    </p>
    <table class="bordered absorbing">
        <thead>
            <tr>
                <th scope="col" data-display-mode="address" class="key-size absorbing-column-half" translate-context="Title" translate-comment="table heading" translate>Email</th>
                <th scope="col" data-display-mode="user" class="key-size absorbing-column-half" translate-context="Title" translate-comment="table heading" translate>User</th>
                <th scope="col" class="finger-print absorbing-column-half" translate-context="Title" translate-comment="table heading" translate>Fingerprint</th>
                <th scope="col" translate-context="Title" translate-comment="table heading" translate>Key type</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat-start="address in addresses | orderBy: 'order' track by address.addressID">
                <td>
                    <span class="addressKeysView-toggle no-ellipsis">
                        <toggle-expand data-model="address"></toggle-expand>
                    </span>
                    <span class="addressKeysView-email ellipsis" title="{{ address.email }}"><strong>{{ address.email }}</strong></span>
                </td>
                <td class="finger-print">
                    <code>{{ address.fingerprint }}</code>
                </td>
                <td>
                    {{ address.algType }}
                </td>
            </tr>
            <tr class="hasTable"
                ng-if="address.toggle === true && address.keys.length > 0"
                ng-repeat-end>
                <td colspan="4">
                    <div class="pm_table">
                        <table class="margin-top">
                            <thead>
                                <tr>
                                    <th class="finger-print absorbing-column-half" translate-context="Title" translate-comment="table heading" translate>Fingerprint</th>
                                    <th class="key-size" translate-context="Title" translate-comment="table heading" translate>Key type</th>
                                    <th class="status" translate-context="Title" translate-comment="table heading" translate>Status</th>
                                    <th class="actions text-center" translate-context="Title" translate-comment="table heading" translate>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="key-row"
                                    ng-repeat="key in address.keys track by key.ID">
                                    <td class="finger-print">
                                        <code>{{ key.fingerprint }}</code>
                                    </td>
                                    <td>
                                        {{ key.algType }}
                                    </td>
                                    <td>
                                        <span class="pm_badge primary"
                                              ng-show="$first"
                                              pt-tooltip-translate="ProtonMail users will use this key by default for sending"
                                              pt-tooltip-translate-context="Tooltip"
                                              translate-context="Key state badge"
                                              translate-comment="key state badge"
                                              translate>Primary</span>
                                        <span class="pm_badge success"
                                              ng-show="key.decrypted"
                                              pt-tooltip-translate="You have locally decrypted this key"
                                              pt-tooltip-translate-context="Tooltip"
                                              translate-context="Key state badge"
                                              translate-comment="key state badge"
                                              translate>Active</span>
                                        <span class="pm_badge error"
                                              ng-hide="key.decrypted"
                                              pt-tooltip-translate="This key is encrypted with an old password"
                                              pt-tooltip-translate-context="Tooltip"
                                              translate-context="Key state badge"
                                              translate-comment="key state badge"
                                              translate>Inactive</span>
                                        <span class="pm_badge default" ng-show="address.status === 0"
                                              pt-tooltip-translate="This address has been disabled"
                                              pt-tooltip-translate-context="key flag info"
                                              translate-context="Key state badge"
                                              translate-comment="key state badge"
                                              translate>Disabled</span>
                                        <span class="pm_badge warning"
                                              ng-show="key.decrypted && key.Flags > 0 && key.Flags < 3 && address.status !== 0"
                                              data-display-mode="address">
                                            <span
                                                pt-tooltip-translate-context="key flag info"
                                                pt-tooltip-translate="This key cannot be used for encryption"
                                                pt-placement="top"
                                                translate-context="Key state badge"
                                                translate>Obsolete</span>
                                            <button
                                                type="button"
                                                class="pm_button link"
                                                data-action="markValid"
                                                data-address-id="{{ address.addressID }}"
                                                data-key-index="{{ $index }}"
                                                pt-tooltip-translate-context="Action"
                                                pt-tooltip-translate="Enable encryption"
                                                pt-placement="top">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </span>
                                        <span class="pm_badge warning"
                                              ng-show="key.Flags === 0"
                                              data-display-mode="address">
                                            <span
                                                pt-tooltip-translate-context="key flag info"
                                                pt-tooltip-translate="Signatures produced by this key are treated as invalid and this key cannot be used for encryption"
                                                pt-placement="top"
                                                translate-context="Key state badge"
                                                translate>Compromised</span>
                                            <button
                                                type="button"
                                                class="pm_button link"
                                                data-action="markObsolete"
                                                data-address-id="{{ address.addressID }}"
                                                data-key-index="{{ $index }}"
                                                pt-tooltip-translate-context="Action"
                                                pt-tooltip-translate="Enable signature verification"
                                                pt-placement="top">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="pm_buttons link">
                                            <button type="button"
                                                    class="pm_buttons pm_button"
                                                    ng-if="!key.decrypted"
                                                    data-action="reactivateKey"
                                                    data-address-id="{{ address.addressID }}"
                                                    data-key-index="{{ $index }}"
                                                    translate-context="Action"
                                                    translate>Reactivate</button>
                                            <button type="button"
                                                    class="pm_buttons pm_button"
                                                    ng-if="!isSubUser && key.decrypted"
                                                    data-action="exportKey"
                                                    data-address-id="{{ address.addressID }}"
                                                    data-key-index="{{ $index }}"
                                                    translate-context="Action"
                                                    translate>Export</button><a
                                                class="pm_buttons pm_button pm_trigger fa fa-angle-down"
                                                ng-class="{ disabled: !isSubUser && $first || (displayMode == 'user' && key.decrypted) }"
                                                dropdown></a>
                                            <div class="pm_dropdown wide right default-padding">
                                                <button type="button"
                                                        class="pm_button link"
                                                        ng-show="!isSubUser && !key.decrypted"
                                                        data-action="exportKey"
                                                        data-address-id="{{ address.addressID }}"
                                                        data-key-index="{{ $index }}"
                                                        translate-context="Action"
                                                        translate>Export</button>
                                                <button type="button"
                                                        class="pm_button link"
                                                        ng-show="!$first && key.decrypted && key.Flags === 3 && address.status !== 0"
                                                        data-display-mode="address"
                                                        data-action="makePrimaryKey"
                                                        data-address-id="{{ address.addressID }}"
                                                        data-key-index="{{ $index }}"
                                                        translate-context="Action"
                                                        translate>Make Primary</button>
                                                <button type="button"
                                                        class="pm_button link"
                                                        pt-tooltip-translate-context="key flag info"
                                                        pt-tooltip-translate="Disables encryption with this key"
                                                        data-action="markObsolete"
                                                        data-display-mode="address"
                                                        data-address-id="{{ address.addressID }}"
                                                        ng-if="!$first && key.Flags > 1 && address.status !== 0"
                                                        data-key-index="{{ $index }}"
                                                        translate-context="Action"
                                                        translate>Mark obsolete</button>
                                                <button type="button"
                                                        class="pm_button link"
                                                        pt-tooltip-translate-context="key flag info"
                                                        pt-tooltip-translate="Disables signature verification and encryption with this key"
                                                        data-action="markCompromised"
                                                        data-display-mode="address"
                                                        data-address-id="{{ address.addressID }}"
                                                        data-key-index="{{ $index }}"
                                                        ng-if="!$first && key.Flags !== 0"
                                                        translate-context="Action"
                                                        translate>Mark compromised</button>
                                                <button type="button"
                                                        class="pm_button link"
                                                        data-action="deleteKey"
                                                        data-display-mode="address"
                                                        data-address-id="{{ address.addressID }}"
                                                        data-key-index="{{ $index }}"
                                                        translate-context="Action"
                                                        translate>Delete</button>

                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
